<template>
  <section class="component overdue-information">
    <ul class="overflow-hidden">
      <li
        class="float-left"
        v-for="{ value, label, index } in this.information"
        :key="index"
      >
        <span>{{ label }}：</span>
        <span>{{ value }}</span>
      </li>
    </ul>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import TelephoneBook from "~/components/collection-execution/collection-add-list/telephone-book.vue";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { namespace } from "vuex-class";
const CollectionExecutionModule = namespace("collection-execution");
@Component({
  components: {
    TelephoneBook
  }
})
export default class OverdueInformation extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @CollectionExecutionModule.State private caseId;

  private information: any = [
    {
      key: "overdueAmount",
      label: "账户逾期金额",
      value: ""
    },
    {
      key: "caseMoney",
      label: "账户总金额",
      value: ""
    },
    {
      key: "overdueCapital",
      label: "账户逾期本金",
      value: ""
    },
    {
      key: "overdueInterest",
      label: "账户逾期利息",
      value: ""
    },
    {
      key: "overdueFine",
      label: "账户逾期罚息",
      value: ""
    },
    {
      key: "overdueCompound",
      label: "账户逾期复利",
      value: ""
    },
    {
      key: "overdueOtherFee",
      label: "账户逾期其他费用",
      value: ""
    },
    {
      key: "m0Amount",
      label: "M0账户总金额",
      value: ""
    },
    {
      key: "m1Amount",
      label: "逾期1-30天金额",
      value: ""
    },
    {
      key: "m2Amount",
      label: "逾期31-60天金额",
      value: ""
    },
    {
      key: "m3Amount",
      label: "逾期61-90天金额",
      value: ""
    },
    {
      key: "m4Amount",
      label: "逾期91-120天金额",
      value: ""
    },
    {
      key: "m5Amount",
      label: "逾期121-150天金额",
      value: ""
    },
    {
      key: "m6Amount",
      label: "逾期151-180天金额",
      value: ""
    },
    {
      key: "afterM6Amount",
      label: "逾期180天以上",
      value: ""
    }
  ];
  private activated() {
    this.refreshData();
  }
  private refreshData() {
    this.caseOperatorPageService
      .queryCaseOverdueInfo(this.caseId)
      .subscribe(data => {
        this.information.forEach(v => {
          v.value = data[v.key] && `${this.$filter.toThousands(data[v.key])}元`;
        });
      });
  }
}
</script>
<style lang="less">
.component.overdue-information {
  padding: 0px 5px 0px 0px;
  .padding-bottom-8 {
    padding-bottom: 8px;
    .name {
      color: #606266;
    }
  }
  ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 32%;
      font-size: 12px;
      list-style: none;
      padding-bottom: 10px;
    }
  }
}
</style>
